<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/store/layout/main.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="title">
        Chocolor:Add order
    </ui:define>

	<ui:define name="content">

		<ui:include src="/global/gadgets/loginRequired.xhtml" />

		<c:if test="#{loginBean.isAuthenticated()}">
			<h:form enctype="multipart/form-data" id="order">

				<p:messages id="msgs" autoUpdate="true" />
				<p:panelGrid
					style="margin-top:20px; width:100%; border-style:hidden"
					id="addOrderForm">
					<f:facet name="header">
						<p:row>
							<p:column style="border-style:hidden" colspan="2">Order form</p:column>
						</p:row>
					</f:facet>

					<p:row>
						<p:column style="width:200px; border-style:hidden">Client:</p:column>
						<p:column style="border-style:hidden">#{orderAdd.orderDraft.client.clientId}</p:column>
					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Order date:</p:column>
						<p:column style="border-style:hidden">#{timerBean.formatDate(orderAdd.orderDraft.orderDraftDate)}</p:column>

					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Choose article: *	</p:column>
						<p:column style="border-style:hidden">
							<p:panelGrid style="border-style:hidden">
								<p:row>
									<p:column style="border-style:hidden">
										<p:selectOneMenu value="#{orderAdd.orderDraft.plateArticle}"
											style="border-style:hidden" id="Article" effect="fade"
											required="true">
											<f:selectItem itemLabel="Select One" noSelectionOption="true" />
											<f:selectItems value="#{orderAdd.getPlateArticles()}"
												var="article" itemLabel="#{article.articleId}"
												itemValue="#{article}" />
											<p:ajax event="change" />
										</p:selectOneMenu>
									</p:column>
									<p:column style="border-style:hidden">
										<p:commandButton value="?"
											style="font-size:50%; vertical-align:55%" immediate="true" />
									</p:column>
								</p:row>
							</p:panelGrid>
						</p:column>
					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Insert your logotype: * </p:column>
						<p:column style="border-style:hidden">

							<p:outputPanel autoUpdate="true" id="Logotype">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<c:if test="#{!orderAdd.logotypeExists()}">
												<p:fileUpload id="upload"
													fileUploadListener="#{orderAdd.handleLogotypeUpload}"
													mode="advanced" multiple="false" label="Add sketch"
													showButtons="false" auto="false"
													allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
													invalidFileMessage="Invalid file"
													invalidSizeMessage="Invalid file size" sizeLimit="1000000"
													required="true">
												</p:fileUpload>
											</c:if>
										</p:column>

										<c:if test="#{orderAdd.logotypeExists()}">
											<p:column style="border-style:hidden">
												<br />
												<p:commandLink value="#{orderAdd.orderDraft.orderName}"
													ajax="false" immediate="true">
													<p:fileDownload value="#{orderAdd.getBufferDownloadFile()}" />
												</p:commandLink>
											</p:column>
											<p:column style="border-style:hidden">
												<p:commandButton value="Reset logotype"
													action="#{orderAdd.resetLogotype()}" ajax="false"
													immediate="true" />
											</p:column>
										</c:if>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:outputPanel>
						</p:column>

					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Insert your inscription: </p:column>
						<p:column style="border-style:hidden">
							<p:panelGrid style="border-style:hidden">
								<p:row>
									<p:column style="border-style:hidden">
										<p:inputText id="Inscription" maxlength="45"
											value="#{orderAdd.orderDraft.inscription}" required="false">
											<p:ajax event="keyup" update="counter" />
										</p:inputText>
									</p:column>
									<p:column style="border-style:hidden">
										<h:outputText id="counter"
											value="#{orderAdd.getInscriptionCountDown()}" />
									</p:column>
									<p:column style="border-style:hidden">
										<p:commandButton value="?"
											style="font-size:50%; vertical-align:55%" immediate="true" />
									</p:column>
								</p:row>
							</p:panelGrid>
						</p:column>

					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Choose frame: * </p:column>
						<p:column style="border-style:hidden">
							<p:panelGrid style="border-style:hidden">
								<p:row>
									<p:column style="border-style:hidden">
										<p:selectOneMenu value="#{orderAdd.orderDraft.hasFrame}"
											id="Frame" effect="fade" required="true">
											<f:selectItem itemLabel="Select one" noSelectionOption="true" />
											<f:selectItem itemLabel="No frame" itemValue="false" />
											<f:selectItem itemLabel="With frame" itemValue="true" />
										</p:selectOneMenu>
									</p:column>
									<p:column style="border-style:hidden">
										<p:commandButton value="?"
											style="font-size:50%; vertical-align:55%" immediate="true" />
									</p:column>
								</p:row>
							</p:panelGrid>
						</p:column>

					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Select chocolate type: * </p:column>
						<p:column style="border-style:hidden">
							<p:panelGrid style="border-style:hidden">
								<p:row>
									<p:column style="border-style:hidden">
										<p:selectOneMenu value="#{orderAdd.orderDraft.chocolateType}"
											id="Chocolate" effect="fade" required="true">
											<f:selectItem itemLabel="Select One" noSelectionOption="true" />
											<f:selectItems value="#{orderAdd.chocolateTypes}"
												var="chocolate" itemLabel="#{chocolate.rawType}"
												itemValue="#{chocolate}" />
										</p:selectOneMenu>
									</p:column>
									<p:column style="border-style:hidden">
										<p:commandButton value="?"
											style="font-size:50%; vertical-align:55%" immediate="true" />
									</p:column>
								</p:row>
							</p:panelGrid>
						</p:column>

					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Choose packing: * </p:column>
						<p:column style="border-style:hidden">
							<p:panelGrid style="border-style:hidden">
								<p:row>
									<p:column style="border-style:hidden">
										<p:selectOneMenu value="#{orderAdd.orderDraft.platePacking}"
											id="Packing" required="true" effect="fade">
											<f:selectItem itemLabel="Select One" noSelectionOption="true" />
											<f:selectItems value="#{orderAdd.platePackings}"
												var="packing" itemLabel="#{packing.packingType}"
												itemValue="#{packing}" />
										</p:selectOneMenu>
									</p:column>
									<p:column style="border-style:hidden">
										<p:commandButton value="?"
											style="font-size:50%; vertical-align:55%" immediate="true" />
									</p:column>
								</p:row>
							</p:panelGrid>
						</p:column>

					</p:row>

					<p:row>
						<p:column colspan="2" style="border-style:hidden">
							<p:panelGrid
								style="margin-top:20px; width:60%; border-style:hidden"
								id="colorGrid">
								<f:facet name="header">
									<p:row>
										<p:column style="border-style:hidden" colspan="2">Colors</p:column>
									</p:row>
								</f:facet>
								<p:row>
									<p:column style="border-style:hidden">Choose logotype colour: * </p:column>
									<p:column style="border-style:hidden">
										<p:panelGrid style="border-style:hidden">
											<p:row>
												<p:column style="border-style:hidden">
													<p:selectOneMenu value="#{orderAdd.orderDraft.logoColor}"
														id="LogoColor" required="true" effect="fade">
														<f:selectItem itemLabel="Select One" noSelectionOption="true" />
														<f:selectItems value="#{orderAdd.chocolateColors}"
															var="color" itemValue="#{color}"
															itemLabel="#{color.chocolateColor}" />
													</p:selectOneMenu>
												</p:column>
												<p:column style="border-style:hidden">
													<p:commandButton value="?"
														style="font-size:50%; vertical-align:55%" immediate="true" />
												</p:column>
											</p:row>
										</p:panelGrid>
									</p:column>
								</p:row>

								<p:row>
									<p:column style="border-style:hidden">
										<p:outputPanel autoUpdate="true">
						Choose inscription colour: <c:if
												test="#{orderAdd.inscriptionNotEmpty()}">*</c:if>

										</p:outputPanel>

									</p:column>
									<p:column style="border-style:hidden">
										<p:outputPanel autoUpdate="true">
											<p:panelGrid style="border-style:hidden">
												<p:row>
													<p:column style="border-style:hidden">
														<p:selectOneMenu
															value="#{orderAdd.orderDraft.inscriptionColor}"
															id="InscriptionColor" effect="fade"
															required="#{orderAdd.inscriptionNotEmpty()}"
															disabled="#{!orderAdd.inscriptionNotEmpty()}">
															<f:selectItem itemLabel="None" noSelectionOption="true" />
															<f:selectItems value="#{orderAdd.chocolateColors}"
																var="color" itemValue="#{color}"
																itemLabel="#{color.chocolateColor}" />
														</p:selectOneMenu>
													</p:column>
													<p:column style="border-style:hidden">
														<p:commandButton value="?"
															style="font-size:50%; vertical-align:55%"
															immediate="true" />
													</p:column>
												</p:row>
											</p:panelGrid>

										</p:outputPanel>
									</p:column>

								</p:row>
								<p:row>
									<p:column style="border-style:hidden">Choose plate colour: * </p:column>
									<p:column style="border-style:hidden">
										<p:panelGrid style="border-style:hidden">
											<p:row>
												<p:column style="border-style:hidden">
													<p:selectOneMenu value="#{orderAdd.orderDraft.plateColor}"
														id="PlatoColor" required="true" effect="fade">
														<f:selectItem itemLabel="Select One" noSelectionOption="true" />
														<f:selectItems value="#{orderAdd.chocolateColors}"
															var="color" itemValue="#{color}"
															itemLabel="#{color.chocolateColor}" />
													</p:selectOneMenu>
												</p:column>
												<p:column style="border-style:hidden">
													<p:commandButton value="?"
														style="font-size:50%; vertical-align:55%" immediate="true" />
												</p:column>
											</p:row>
										</p:panelGrid>
									</p:column>

								</p:row>

								<p:row>
									<p:column style="border-style:hidden">
										<p:outputPanel autoUpdate="true">Choose body colour: <c:if
												test="#{orderAdd.articleHasBody()}">*</c:if>
										</p:outputPanel>
									</p:column>
									<p:column style="border-style:hidden">
										<p:outputPanel autoUpdate="true">
											<p:panelGrid style="border-style:hidden">
												<p:row>
													<p:column style="border-style:hidden">
														<p:selectOneMenu value="#{orderAdd.orderDraft.bodyColor}"
															id="BodyColor" effect="fade"
															required="#{orderAdd.articleHasBody()}"
															disabled="#{!orderAdd.articleHasBody()}">
															<f:selectItem itemLabel="None" noSelectionOption="true" />
															<f:selectItems value="#{orderAdd.chocolateColorBodies}"
																var="color" itemValue="#{color}"
																itemLabel="#{color.chocolateColor}" />
														</p:selectOneMenu>
													</p:column>
													<p:column style="border-style:hidden">
														<p:commandButton value="?"
															style="font-size:50%; vertical-align:55%"
															immediate="true" />
													</p:column>
												</p:row>
											</p:panelGrid>
										</p:outputPanel>
									</p:column>

								</p:row>
							</p:panelGrid>
						</p:column>
					</p:row>

					<p:row>
						<p:column style="border-style:hidden">Choose quantity: * </p:column>
						<p:column style="border-style:hidden">
							<p:panelGrid style="border-style:hidden">
								<p:row>
									<p:column style="border-style:hidden">
										<p:selectOneMenu value="#{orderAdd.orderDraft.quantity}"
											id="Quantity" effect="fade" required="true">
											<f:selectItem itemLabel="Select one" noSelectionOption="true" />
											<f:selectItems value="#{orderAdd.quantities}" />
										</p:selectOneMenu>
									</p:column>
									<p:column style="border-style:hidden">
										<p:commandButton value="?"
											style="font-size:50%; vertical-align:55%" immediate="true" />
									</p:column>
								</p:row>
							</p:panelGrid>
						</p:column>

					</p:row>

					<f:facet name="footer">
						<p:row>
							<p:column style="text-align:left; border-style:hidden"
								colspan="2">
								<p:commandButton value="Preview order" id="previewOrder"
									ajax="false" action="#{orderAdd.previewOrder}" type="submit" />

								<p:commandButton value="Cancel order" id="cancelOrder"
									onclick="confirmation.show()" type="button" />

								<p:commandButton value="Save" icon="ui-icon-disk" ajax="false"
									action="#{orderAdd.saveDraft}" immediate="true" />

								<p:confirmDialog id="confirmCancelOrder"
									message="Are you sure you want to cancel your order?"
									header="Cancel order" severity="alert" widgetVar="confirmation">
									<p:commandButton id="confirmCancel" value="Yes"
										onclick="confirmation.hide(); draftConfirm.show();"
										type="button" />
									<p:commandButton id="declineCancel" value="No"
										onclick="confirmation.hide()" type="button" />

								</p:confirmDialog>

								<p:confirmDialog id="confirmSaveDraft"
									message="Do you want to save draft?" header="Cancel order"
									severity="alert" widgetVar="draftConfirm">
									<p:commandButton id="confirmSave" value="Yes" ajax="false"
										immediate="true" onclick="draftConfirm.hide();"
										action="#{orderAdd.cancelSaveDraft}" />
									<p:commandButton id="declineSave" value="No" ajax="false"
										immediate="true" action="#{orderAdd.dontSaveDraft}"
										onclick="draftConfirm.hide()" />
									<p:commandButton id="return" value="Cancel"
										onclick="draftConfirm.hide()" type="button" />

								</p:confirmDialog>


							</p:column>
						</p:row>



					</f:facet>
				</p:panelGrid>

			</h:form>
		</c:if>
	</ui:define>
</ui:composition>
